iOS 11 Human Interface Guidelinesをさらっと読みまとめ

#デザイン

たなかゆきこ

2017.09.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

デザイナーのたなかゆきこです。 iOS 11 Human Interface Guidelinesが更新されたのでさっと読んで軽くまとめました。 Xのデザインについて、デザイナー的には久々のインパクト。

Screen Size

サイズ	端末	pt（px）	書き出し
4.7inch	iPhone 6 iPhone 7 iPhone 8	375x667（640x1136）	@2x
5.5inch	iPhone 6 Plus iPhone 7 Plus iPhone 8 Plus	375x667（1125x2001）	@3x
5.8inch	iPhone X	375x812（1125x2436）	@3x

縦の長さが増加。（公式では20%増加）
全部3x（もうPhotoshopパイセンは難しいかな）
端っこの角丸、センサーハウジングの部分に気をつけないと厳しそう
縦横のバランスをとっていたはずの画面が崩れるデザイナーの悲鳴

Layout

アスペクト比について

全画面表示の場合は、比率が違うためおかしなトリミングや余白が発生する可能性がある
それはもしかすると、2つ画像を用意したりする必要性があるのかもしれない

Color

色の発色が良くなる。綺麗にみえる。

【私的意見：Androidとの差を気にしないといけないでしょう。iPhone Xで視認できる色を使用してデザインを組むと、他の端末でその色を識別できない可能性がある。端末もピンキリのため】デザイナーは基本的に、他の人よりも色を認識するための目がいいと思って作業をする。かつてWEB業界でMacとWinで発色の違いによる差が問題になった時は、精度の悪いほう（Win）での実機確認をしていた事実がある。

Gestures

ジェスチャーでのHOMEや通知センターへの行き来を行う。デザイン面では、スワイプや、上部アイコンの押しにくさなど考慮が必要。ラウンドコーナー周辺まわりはなんだか色々どうしようという気持ちになっているが、StatusBarの要素が表示されているので、気にしなくてもよい可能性を感じます。

What's New in iOS 11

Augmented reality.（拡張現実）

アップルのAR（拡張現実感）テクノロジーARKit
現実的な仮想オブジェクトを現実世界とシームレスに融合させる魅力的で魅力的な体験を提供する

重要なのは「体験設計」

人々を巻き込む
物理的な制約は考慮しないといけない
ユーザーの快適さを考える。
チュートリアル的なものを入れて、ユーザーを慣れさせる。チュートリアル
ユーザーの安全配慮
音響と触覚をフィードバック。※Designing a Great Audio Experience参照
可能な限り「コンテクスト（文脈）」でヒントを表示
指示テキスト（コンテクスト）は、親しみやすい用語を利用する

Bolder navigation.

洗練されたアーティステック・シンプルではなく、広い範囲の人へというようなデザインの方向性。

ナビゲーションバータイトルは、現在のビューのタイトルを表示する
その際、コンテクストに重点を置く場合は、大きなタイトルを使用する。

Clearer icons.

「線アイコンと、塗りアイコンをActiveとnon-Activeにしないでください」が追加された。

カスタムアイコンサイズ

もう2で割り切ることができない。中心線が0.5になる。

iOS:PDF出力、Android:SVGで一つのファイルを出力する方向性

Navigation Bar and Toolbar Icon Size

Target sizes	Maximum sizes
75px × 75px (25pt × 25pt @3x)	83px × 83px (27.67pt × 27.67pt @3x)
50px × 50px (25pt × 25pt @2x)	56px × 56px (28pt × 28pt @2x)